<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <ul id="wrapper"></ul>
    <script src="./tool.js"></script>
    <script>
        // document.getElementsByTagName('div')[0].onclick = function () {
        //     startMove(this, {left: 600, opacity: 0.7})
        // }
        var imgArr = [
            { src: './imgs/1.jpeg', title: '我是title', width: 650, height: 929 },
            { src: './imgs/2.jpg', title: '我是title', width: 800, height: 640 },
            { src: './imgs/3.jpeg', title: '我是title', width: 1000, height: 1000 },
            { src: './imgs/4.jpg', title: '我是title', width: 500, height: 500 },
            { src: './imgs/6.jpg', title: '我是title', width: 800, height: 640 }
        ]
        var oUl = document.getElementById('wrapper');
        var liList = oUl.getElementsByTagName('li');
        var WIDTH = 280;
        var INT = 10;
        var heiArr = [];
        // 生成dom并插入
        function creDom(list) {
            list.forEach(function (item) {
                var itemLi = document.createElement('li');
                var oImg = document.createElement('img');
                var tempImg = document.createElement('img');
                var title = document.createElement('p');
                var scale = WIDTH / item.width;
                title.innerHTML = item.title;
                tempImg.src = './imgs/timg.gif';
                oImg.src = item.src;
                oUl.appendChild(itemLi);
                var minObj = getMin(item.height * scale);
                setStyle(itemLi, { width: WIDTH + 'px', height: item.height * scale + 'px', position: 'absolute', left: (WIDTH + INT) * minObj.index + 'px', top: minObj.min + 'px', boxShadow: '1px 1px 3px 1px rgba(200, 200, 200, .6)' });
                setStyle(oImg, { width: WIDTH + 'px', height: item.height * scale + 'px' })
                setStyle(tempImg, { width: '300px' });
                itemLi.appendChild(tempImg);
                setStyle(oUl, { height: Math.max.apply(null, heiArr) + 'px' });
                oImg.onload = function () {
                    setTimeout(function () {
                        itemLi.removeChild(tempImg);
                        itemLi.appendChild(oImg);
                        itemLi.appendChild(title);
                        itemLi.onmouseenter = function(e) {
                            e = e || window.event;
                            console.log(e)
                            var direction = getDirection(oUl, e, this);
                            move(this, direction, 'in');
                        }
                        itemLi.onmouseleave = function(e) {
                            e = e || window.event;
                            var direction = getDirection(oUl, e, this);
                            move(this, direction, 'off');
                        }
                    }, Math.random() * 2000);
                }
            })
        }
      
        // 初始化
        function init() {
            var list = [];
            for (var i = 0; i < imgArr.length; i++) {
                imgArr.forEach(function (item) {
                    list.push(item);
                });
            }
            list.sort(function () {
                var a = Math.random();
                var b = Math.random();
                return a - b
            });
            creDom(list)
        }

        // function getMin() {
        //     var col = Math.floor(oUl.offsetWidth / (WIDTH + INT));
        //     var index = 0;
        //     var min = 0;
        //     for (var i = 0; i < liList.length; i++) {
        //         if (i < col) {
        //             heiArr[i] = liList[i].offsetHeight + INT;
        //             index = i;
        //         } else {
        //             min = Math.min.apply(null, heiArr);
        //             index = heiArr.indexOf(min);
        //             heiArr[index] += liList[i].offsetHeight + INT;
        //         }
        //     }
        //     return {index, min};
        // }
        
        // 获取高度数组最小值index
        function getMin(height) {
            var col = Math.floor(oUl.offsetWidth / (WIDTH + INT));
            var index = 0;
            var min = 0;
            for (var i = 0; i < col; i++) {
                if (heiArr[i] === undefined) {
                    heiArr[i] = 0;
                } else {
                    min = Math.min.apply(null, heiArr);
                    index = heiArr.indexOf(min);
                }
            }
            heiArr[index] += height + INT;
            return { index, min }
        }
        init();
        scrollEvent();
        // 监听滚动条
        function scrollEvent() {
            window.onscroll = function () {
                var H = getScrollOffset().y + getViewportOffset().height;
                if (Math.max.apply(null, heiArr) - H < 20) {
                    init()
                }
            }
        }
    </script>
</body>

</html>